<template>
	<view class="detail-page">
		<!-- 顶部导航栏 -->
		<CustomNavbar>
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<view class="nav-title">就近加油</view>
				<view class="nav-right">
					<text class="nav-icon">⋯</text>
					<text class="nav-icon-target">◎</text>
				</view>
			</view>
		</CustomNavbar>

		<view class="main">
			<!-- 主要内容容器 -->
			<view class="content-wrapper">
				<!-- 加油站大图 -->
				<image :src="stationDetail.image" class="station-banner" mode="aspectFill" />

				<!-- 加油站信息卡片 -->
				<view class="info-card">
					<text class="station-name">{{ stationDetail.name }}</text>
					<text class="station-hours">{{ stationDetail.hours }}</text>
					<view class="location-row">
						<text class="station-location">{{ stationDetail.location }}</text>
						<text class="location-icon">✈</text>
					</view>
					<button class="call-button" @click="makeCall">
						<text class="call-icon">📞</text>
					</button>
				</view>

			</view>
			<!-- 油价详情卡片 -->
			<view class="price-card">
				<text class="price-title">油价详情</text>
				<view class="price-list">
					<view class="price-item" v-for="(price, index) in stationDetail.prices" :key="index">
						<text class="fuel-type">{{ price.type }}</text>
						<text class="fuel-price">¥ {{ price.price }}/L</text>
					</view>
				</view>
			</view>

		</view>

	</view>


</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import CustomNavbar from '@/components/CustomNavbar.vue'

	// 页面参数
	const stationId = ref('')

	// 加油站详情数据
	const stationDetail = ref({
		id: 1,
		name: '中国石油加油站 (解放路店)',
		hours: '营业时间: 周一至周五 早上8:00-晚上22:00',
		location: '位置: 山阳区人民路与解放路交叉口',
		image: '/static/10011.jpg',
		prices: [{
				type: '92#',
				price: '5.86'
			},
			{
				type: '95#',
				price: '5.86'
			},
			{
				type: '98#',
				price: '5.86'
			},
			{
				type: '0#',
				price: '5.86'
			}
		],
		phone: '400-123-4567'
	})

	// 模拟数据
	const stationDataList = {
		1: {
			id: 1,
			name: '中国石油加油站 (解放路店)',
			hours: '营业时间: 周一至周五 早上8:00-晚上22:00',
			location: '位置: 山阳区人民路与解放路交叉口',
			image: '/static/10011.jpg',
			prices: [{
					type: '92#',
					price: '5.86'
				},
				{
					type: '95#',
					price: '5.86'
				},
				{
					type: '98#',
					price: '5.86'
				},
				{
					type: '0#',
					price: '5.86'
				}
			],
			phone: '400-123-4567'
		},
		2: {
			id: 2,
			name: '中国石油加油站 (人民路店)',
			hours: '营业时间: 周一至周五 早上8:00-晚上22:00',
			location: '位置: 山阳区人民路与解放路交叉口',
			image: '/static/10015.jpg',
			prices: [{
					type: '92#',
					price: '5.66'
				},
				{
					type: '95#',
					price: '5.66'
				},
				{
					type: '98#',
					price: '5.66'
				},
				{
					type: '0#',
					price: '5.66'
				}
			],
			phone: '400-123-4568'
		},
		3: {
			id: 3,
			name: '中国石油加油站 (建设路店)',
			hours: '营业时间: 周一至周五 早上8:00-晚上22:00',
			location: '位置: 山阳区人民路与解放路交叉口',
			image: '/static/10040.jpg',
			prices: [{
					type: '92#',
					price: '5.76'
				},
				{
					type: '95#',
					price: '5.76'
				},
				{
					type: '98#',
					price: '5.76'
				},
				{
					type: '0#',
					price: '5.76'
				}
			],
			phone: '400-123-4569'
		}
	}

	// 页面加载
	onLoad((options) => {
		if (options.stationId) {
			stationId.value = options.stationId
			// 根据 stationId 获取详情数据
			const id = parseInt(stationId.value)
			if (stationDataList[id]) {
				stationDetail.value = stationDataList[id]
			}
		}
	})

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	// 拨打电话
	const makeCall = () => {
		if (stationDetail.value.phone) {
			uni.makePhoneCall({
				phoneNumber: stationDetail.value.phone,
				success: () => {
					console.log('拨打电话成功')
				},
				fail: (err) => {
					console.error('拨打电话失败：', err)
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					})
				}
			})
		}
	}
</script>

<style scoped>
	.detail-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	::v-deep .custom-navbar {
		background: linear-gradient(135deg, #2575fc, #6a11cb) !important;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		position: relative;
	}

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 88rpx;
	}

	.back-icon {
		color: #fff;
		font-size: 56rpx;
		font-weight: 300;
		line-height: 88rpx;
		transform: scaleY(1.3);
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 88rpx;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 36rpx;
	}

	.nav-icon-target {
		color: #fff;
		font-size: 32rpx;
	}

	.main {
		position: absolute;
		top: 200rpx;
		background-color: #fff;
		width: 720rpx;
		margin-left: 10rpx;
		border-radius: 20rpx;
	}

	/* 主要内容容器 */
	.content-wrapper {
		margin: 0;
		overflow: hidden;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08);
	}



	/* 加油站大图 */
	.station-banner {
		width: 720rpx;
		padding: 40rpx;
		/* padding-left: 40rpx; */
		box-sizing: border-box;
		height: 400rpx;
		display: block;
		object-fit: cover;
		/* border-radius: 40rpx; */
	}


	/* 信息卡片 */
	.info-card {
		/* background-color: #fff; */
		padding: 40rpx 30rpx;
		position: relative;
	}

	.station-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}

	.station-hours {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.location-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
		padding-right: 120rpx;
	}

	.station-location {
		font-size: 26rpx;
		color: #666;
		flex: 1;
		line-height: 1.5;
	}

	.location-icon {
		font-size: 28rpx;
		color: #2575fc;
		margin-left: 10rpx;
	}

	.call-button {
		position: absolute;
		right: 30rpx;
		bottom: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #2575fc, #6a11cb);
		border-radius: 50%;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 24rpx rgba(37, 117, 252, 0.35);
		transition: all 0.3s ease;
	}

	.call-button:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(37, 117, 252, 0.3);
	}

	.call-icon {
		font-size: 48rpx;
		color: #fff;
		line-height: 1;
	}

	/* 油价详情卡片 */
	.price-card {
		background-color: #fff;
		margin: 20rpx;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.price-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 30rpx;
	}

	.price-list {
		display: flex;
		flex-direction: column;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		min-height: 80rpx;
	}

	.price-item:first-child {
		padding-top: 0;
	}

	.price-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.fuel-type {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.fuel-price {
		font-size: 28rpx;
		color: #ff8c00;
		font-weight: bold;
	}
</style>